<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <meta charset="utf-8">
  <title></title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <script type="text/javascript" src="./javascripts/vue.min.js"></script>
  <style>
    .page-bar{
      margin:40px;
    }
    ul,li{
      margin: 0px;
      padding: 0px;
    }
    li{
      list-style: none
    }
    .page-bar li:first-child>a {
      margin-left: 0px
    }
    .page-bar a{
      border: 1px solid #ddd;
      text-decoration: none;
      position: relative;
      float: left;
      padding: 6px 12px;
      margin-left: -1px;
      line-height: 1.42857143;
      color: #337ab7;
      cursor: pointer
    }
    .page-bar a:hover{
      background-color: #eee;
    }
    .page-bar a.banclick{
      cursor:not-allowed;
    }
    .page-bar .active a{
      color: #fff;
      cursor: default;
      background-color: #337ab7;
      border-color: #337ab7;
    }
    .page-bar i{
      font-style:normal;
      color: #d44950;
      margin: 0px 4px;
      font-size: 12px;
    }
  </style>
</head>
<body>
<div class="page-bar">
  <ul>
    <li v-for="list in listData">
      {{ list.id }}
    </li>
  </ul>
  <ul>
    <li v-if="cur>1"><a v-on:click="cur--,pageClick(-1)">上一页</a></li>
    <li v-if="cur==1"><a class="banclick">上一页</a></li>
    <li v-for="index in indexs"  v-bind:class="{ 'active': cur == index}">
      <a v-on:click="btnClick(index)">{{ index }}</a>
    </li>
    <li v-if="cur!=all"><a v-on:click="cur++,pageClick(1)">下一页</a></li>
    <li v-if="cur == all"><a class="banclick">下一页</a></li>
    <li><a>共<i>{{all}}</i>页</a></li>
  </ul>
</div>
<script src="./javascripts/axios.min.js"></script>
<script type="text/javascript">
  var pageBar = new Vue({
    el: '.page-bar',
    data: {
      listData: '',
      all: 8, //总页数
      cur: 1//当前页码
    },
    watch: {
      cur: function(oldValue , newValue){
        console.log("what is nongshalei",arguments);
      }
    },
    created: function(){
      console.log("创建实例---")
      this.btnClick(1);
    },
    methods: {
      btnClick: function(data){//页码点击事件

        var _this = this;
        if(data != _this.cur){
          _this.cur = data;
          console.log("---cur")
          axios.get(`http://cnodejs.org/api/v1/topics?page=${ data }`)
            .then(function (response) {
              _this.listData = response.data.data;
            })
            .catch(function (error) {
              console.log(error);
            });
        }else{
          axios.get(`http://cnodejs.org/api/v1/topics?page=1`)
            .then(function (response) {
              console.log("----------",response.data.data);
              _this.listData = response.data.data;

            })
            .catch(function (error) {
              console.log(error);
            });
        }
      },
      pageClick: function(num){
        var _this = this;
        console.log('现在在'+this.cur+'页'+num);
        if( num>0 ){
          var data = _this.cur
          console.log("++cur",_this.cur)
          axios.get(`http://cnodejs.org/api/v1/topics?page=${ data }`)
            .then(function (response) {
              _this.listData = response.data.data;
            })
            .catch(function (error) {
              console.log(error);
            });
        }else if( num<0 ){
          var data = _this.cur
          console.log("--cur",_this.cur)
          axios.get(`http://cnodejs.org/api/v1/topics?page=${ data }`)
            .then(function (response) {
              _this.listData = response.data.data;
            })
            .catch(function (error) {
              console.log(error);
            });
        }
      },
    },

    computed: {
      indexs: function(){
        var left = 1;
        var right = this.all;
        var ar = [];
        if(this.all>= 5){
          if(this.cur > 3 && this.cur < this.all-2){
            left = this.cur - 2
            right = this.cur + 2
          }else{
            if(this.cur<=3){
              left = 1
              right = 5
            }else{
              right = this.all
              left = this.all -4
            }
          }
        }
        while (left <= right){
          ar.push(left)
          left ++
        }
        return ar
      }
    }
  })
</script>
</body>
</html>